import { ref, computed, onMounted, onUnmounted } from 'vue';
import { LayerStateManager } from '../module/LayerManager.js';

// 创建全局单例实例
if (!window.globalLayerManager) {
  window.globalLayerManager = new LayerStateManager();
}

// 支持传入全局唯一的layerManager实例
export function useLayerControl(externalLayerManager) {
  // 如果传入则用外部实例，否则使用全局实例
  const layerManager = externalLayerManager || window.globalLayerManager;
  
  // 响应式状态
  const activeLayerStates = ref({ ...layerManager.activeLayerStates });
  
  // 状态变化监听器
  const stateChangeListener = (newState) => {
    activeLayerStates.value = { ...newState };
  };
  
  // 组件挂载时添加监听器
  onMounted(() => {
    layerManager.addStateChangeListener(stateChangeListener);
    // 初始同步状态
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  });
  
  // 组件卸载时移除监听器
  onUnmounted(() => {
    layerManager.removeStateChangeListener(stateChangeListener);
  });
  
  // 计算属性：检查复选框是否应该被禁用
  const windSpeedDisabled = computed(() => activeLayerStates.value.wind.label);
  const currentSpeedDisabled = computed(() => activeLayerStates.value.current.label);
  const seatempScalarDisabled = computed(() => activeLayerStates.value.seatemp.label);
  
  // 检查数值标签依赖关系
  const checkLabelDependency = (type, field) => {
    return layerManager.checkLabelDependency(type, field);
  };
  
  // 更新所有图层
  const updateAllLayers = (selectedDate, selectedTime) => {
    layerManager.updateAllLayers(selectedDate, selectedTime);
    // 同步状态
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  // 处理风场复选框变化
  const handleWindCheckboxChange = (field, checked, selectedDate, selectedTime) => {
    if (!checked && !checkLabelDependency('wind', field)) {
      return;
    }
    
    if (checked) {
      switch (field) {
        case 'particle': layerManager.loadWind(selectedDate, selectedTime); break;
        case 'speed': layerManager.loadWind_speed(selectedDate, selectedTime); break;
        case 'arrow': layerManager.loadWind_arrow(selectedDate, selectedTime); break;
        case 'feather': layerManager.loadWind_Feather(selectedDate, selectedTime); break;
        case 'label': layerManager.loadWind_label(selectedDate, selectedTime); break;
      }
    } else {
      switch (field) {
        case 'particle': layerManager.removeWindParticle(); break;
        case 'speed': layerManager.removeWindSpeed(); break;
        case 'arrow': layerManager.removeWindArrow(); break;
        case 'feather': layerManager.removeWindFeather(); break;
        case 'label': layerManager.removeWindLabel(); break;
      }
    }
    
    // 同步状态
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  // 处理洋流复选框变化
  const handleCurrentCheckboxChange = (field, checked, selectedDate, selectedTime) => {
    if (!checked && !checkLabelDependency('current', field)) {
      return;
    }
    
    if (checked) {
      switch (field) {
        case 'particle': layerManager.loadCur(selectedDate, selectedTime); break;
        case 'speed': layerManager.loadCur_speed(selectedDate, selectedTime); break;
        case 'arrow': layerManager.loadCur_arrow(selectedDate, selectedTime); break;
        case 'feather': layerManager.loadCur_Feather(selectedDate, selectedTime); break;
        case 'label': layerManager.loadCur_label(selectedDate, selectedTime); break;
      }
    } else {
      switch (field) {
        case 'particle': layerManager.removeCurParticle(); break;
        case 'speed': layerManager.removeCurSpeed(); break;
        case 'arrow': layerManager.removeCurArrow(); break;
        case 'feather': layerManager.removeCurFeather(); break;
        case 'label': layerManager.removeCurLabel(); break;
      }
    }
    
    // 同步状态
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  // 处理海温复选框变化
  const handleSeatempCheckboxChange = (field, checked, selectedDate, selectedTime) => {
    if (!checked && !checkLabelDependency('seatemp', field)) {
      return;
    }
    
    if (checked) {
      switch (field) {
        case 'scalar': layerManager.loadSeatemp(selectedDate, selectedTime); break;
        case 'label': layerManager.loadSeatemp_label(selectedDate, selectedTime); break;
      }
    } else {
      switch (field) {
        case 'scalar': layerManager.removeSeatempScalar(); break;
        case 'label': layerManager.removeSeatempLabel(); break;
      }
    }
    
    // 同步状态
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  // 全选功能
  const loadAllWind = (selectedDate, selectedTime) => {
    layerManager.loadAllWind(selectedDate, selectedTime);
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  const loadAllCurrent = (selectedDate, selectedTime) => {
    layerManager.loadAllCurrent(selectedDate, selectedTime);
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  const loadAllSeatemp = (selectedDate, selectedTime) => {
    layerManager.loadAllSeatemp(selectedDate, selectedTime);
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  // 清除功能
  const removeWind = () => {
    layerManager.removeWind();
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  const removeCur = () => {
    layerManager.removeCur();
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  const removeSeatemp = () => {
    layerManager.removeSeatemp();
    activeLayerStates.value = { ...layerManager.activeLayerStates };
  };
  
  return {
    activeLayerStates,
    windSpeedDisabled,
    currentSpeedDisabled,
    seatempScalarDisabled,
    checkLabelDependency,
    updateAllLayers,
    handleWindCheckboxChange,
    handleCurrentCheckboxChange,
    handleSeatempCheckboxChange,
    loadAllWind,
    loadAllCurrent,
    loadAllSeatemp,
    removeWind,
    removeCur,
    removeSeatemp
  };
} 